import { Modal } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { CheckCircleFilled } from '@ant-design/icons'
import { setColorPrimary } from '@/store/slices/theme'
import { globalConfig } from '@/globalConfig'
import './themeModal.styl'
function ThemeModal({ open = false, onClose = (val) => {} }) { // 为 open 和 onClose 添加默认值
    const dispatch = useDispatch()
    // 从 store 中获取 theme
    const theme = useSelector(state => state.theme)
    //获取主题色列表
    const themeColorList = globalConfig.customColorPrimarys || [];
    // 渲染主题色列表
    const renderThemeColorList = () => {
      return  themeColorList.map((item, index) => {
            return (
                <div className="theme-color"
                     style={{ backgroundColor: item.toString() }}
                     key={index}
                     onClick={() => {dispatch(setColorPrimary(item));onClose(false)}}>
                    {
                        theme.colorPrimary === item && (
                            <CheckCircleFilled
                                style={{
                                    fontSize: 28,
                                    color: '#fff',
                                }}/>
                        )
                    }
                </div>
            )
        })
    }
    return (
        <Modal
            className="M-themeModal"
            open={open}
            title="主题色"
            onCancel={() => onClose(false)} // 确保 onClose 存在时调用
            maskClosable={false}
            footer={null} // 添加 footer 为 null，避免默认按钮干扰
        >
            <div className="colors-con">
                {renderThemeColorList()}
            </div>
        </Modal>
    )
}

export default ThemeModal